<template>
    <div class="index">
      <div class="index_head" ref="head">欢迎使用图书管理系统
        <div class="logout">
          <el-button size="mini" type="danger" @click="log_off ">注销</el-button>
        </div>
      </div>
      <div class="index_left" >
        <div class="index_user">
          <i class="el-icon-user-solid" ></i>
          <p>用户:{{ this.username }}</p>
        </div>
        <div class="left_buttons">
        <div  v-for="(item,index) in arr" 
        :key="index" 

        @click="light_tab(index)" 
        @mouseenter="handleMouseEnter"
        :class="activeIndex == index ? ' index_buttons buttons_top active':' index_buttons buttons_top'" >
        <router-link class="buttons_route" :to="item.nav_to" >{{ item.nav_route }}
        </router-link></div>
        <!-- <div @click="light_tab" class="index_buttons buttons_top"><router-link to="/Index/seach"  index="1"  class="index_buttons buttons_top" >图书信息</router-link></div>
        <div @click="light_tab" class="index_buttons buttons_top"><router-link to="/Index/seach"  index="1"  >图书信息</router-link></div>
        <div @click="light_tab" class="index_buttons buttons_top"><router-link to="/Index/seach"  index="1"  >图书信息</router-link></div>
        <div @click="light_tab" class="index_buttons buttons_top"><router-link to="/Index/seach"  index="1"  >图书信息</router-link></div> 
         <router-link to="/Index/add_book" class="index_buttons"  >新增图书<div @click="light_tab"></div></router-link> -->
        </div>
      </div>
      <div class="index_right" >     
      <router-view > </router-view>
      </div>
      <Delete v-if="logoff" :log_f="log_off"></Delete>
    </div>
</template>
<style lang="less" scoped>
.index{
  width: 100%;
  height: 100%;
  position: relative;
  // border-style: solid;
  
  // background-color:rgba(255, 253,253, );
  // background-color:rgba(255, 255,255, );
  background-color: #fff;
  .index_head{
    height: 6%;
    width: 100%;
    color:#fff;
    // background-color:#fff;
    // background-color:rgba(245, 243,243, );
    background-color: #fff;
    position: absolute;
    top: 0px;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    // border-bottom: 1px;
    border-bottom-style:solid;
    border-color: rgba(79, 78, 76,0.3);
    border-width:0.1px;
    .logout{
      position: absolute;
      top: -7px;
      right: 5px;
    }
  }
  .index_left{
    display: flex;
    flex-direction:column;
    // justify-content: space-around;
    position: absolute;
    border-radius: 5px;
    border-style: solid;
    top: 6%;
    left: 0px;
    width: 16%;
    height: 94%;
    // background-color: #fff;
    // background-color: #50a68a;
    // background-color: #fff;
    // background-color:rgba(245, 243,243, );
    // background-color: rgba(247, 248, 243,0.95);
    background-color:#409EFF;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right-style:solid;
    border-right-width: 0.1px;
    border-color: rgba(79, 78, 76,0.3);
    .index_user{
      font-size: 50px;
      color: #fff;
      margin-left: 92px;
      margin-top: 39px;
      p{
        font-size: 12px;
        position: absolute;
        top: 107px;
        left: 78px;
        color: #fff;
      }
    }
    .left_buttons{
      position: absolute;
      top: 165px;
      height: 500px;
      // background-color: rgba(247, 248, 243,0.95);
      // background-color: rgb(245, 243, 243);
      // background-color: rgba(247, 248, 243,0.95);
      // background-color: rgba(79, 78, 76,0.3);;
      background-color:#fff;
      background-color:#409EFF;
      width: 100%;
      display: flex;
      flex-direction:column;
      // justify-content: space-around;
      .index_buttons{
       width: 100%;
       height: 55px;
       //  background-color: rgba(247, 248, 243,0.95);
      //  background-color: rgb(245, 243, 243);
      //  background-color: rgba(247, 248, 243,0.95);
      // background-color:rgba(79, 78, 76,0.3);
      background-color:#409EFF;
       text-align: center;
       line-height: 58px;
       border-bottom-style:solid;
       border-width: 0.1px;
       border-color: rgba(79, 78, 76,0.3);
       margin-bottom: 0px;
       border-radius: 8px;
       color: #ffffff;
       .buttons_route{
        // position: absolute;
        display: block;
        width: 100%;
       height: 55px;
       color: #ffffff;
       }
      }
      .index_buttons:hover{
        background-color:#ffffff;
        .buttons_route{
          color: black;
        }
        // background-color: #fff;
      }

    }
    .buttons_top{
      border-top-style:solid;
      border-top-width: 0.1px;
      border-top-color:#409EFF;
    }
  }
  .index_right{
    position: absolute;
    top: 6%;
    right: 0px;
    width: 84%;
    height: 94%;
    // background-color:rgba(245, 243,243, );
    background-color:#fff;
    overflow: auto;
  }
}
.active{
  // color: red;
  background-color:#2e59ce !important;
  color:black !important;
  // color: black !important;;
  // border-bottom: 1px solid #000 !important;
  // box-shadow: 10px 10px 10px -4px rgba(228, 42, 42, 0.3) !important;
}

</style>
<script>
import Delete from '../components/Log_off.vue'
import * as THREE from "three";
import CLOUDS from "vanta/src/vanta.clouds";
import WAVES from "vanta/src/vanta.waves";
export default {
  components: { Delete },
  data() {
    return{
      username:sessionStorage.getItem("usrName"),
      // book:$route.query.first_init,
      active_1:"",
      activeIndex: 9,
      arr:[{
        nav_route:"个人信息",
        nav_to:"/Index/home"
      },
        {
        nav_route:"图书信息",
        nav_to:"/Index/book_message"
      },{
        nav_route:"新增图书",
        nav_to:"/Index/add_book"
      },
      {
        nav_route:"用户信息",
        nav_to:"/Index/user_message"
      },
      {
        nav_route:"添加新用户",
        nav_to:"/Index/add_user"
      },
      {
        nav_route:"订阅记录",
        nav_to:"/Index/SubRecord"
      },
      {
        nav_route:"书库",
        nav_to:"/Index/book_store"
      },
      {
        nav_route:"我的书架",
        nav_to:"/Index/my_book"
      },
    ],

      logoff:false
  }
  },

  methods: {
    // tab栏点击高亮
    light_tab(index){
      this.activeIndex=index
      // console.log(this.book);
      this.active_1=index
    },
    handleMouseEnter(){
      this.activeIndex=9

    },
    log_off(){
      this.logoff=!this.logoff
    }
  },
// 
 mounted() {
    this.username=sessionStorage.getItem("usrName"),
    // 头
    this.vantaEffect = WAVES({
      el: this.$refs.head,
      THREE: THREE,
    });
    VANTA.WAVES({
      el: this.$refs.head,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 100.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      speed:2.0,
      color: 0x5f88,
      shininess: 76.0,
      waveHeight: 100,
      waveSpeed: 0.95,
      zoom: 0.89,
    });
    const timer = setTimeout(()=> {
        // 3秒之后，再执行这段代码。
        this.activeIndex=9
    }, 8000);

  },
 beforeDestroy() {
    
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },

}
</script>